import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import postCsspxToRem from "postcss-pxtorem";
import autoprefixer from "autoprefixer";
import path from "path";
import eslintPlugin from "vite-plugin-eslint";

export default defineConfig({
  server: {
    hot: true,
    host: "localhost",
    port: 8080,
    cors: true
    // proxy: {
    //   "/api": {
    //     target: "http://localhost:3000/",
    //     changeOrigin: true,
    //     rewrite: (path) => path.replace(/^\/api/, "")
    //   }
    // }
  },

  base: "./",
  resolve: {
    alias: {
      // eslint-disable-next-line no-undef
      "@/": `${path.resolve(__dirname, "src")}/` // 路径别名
    }
  },
  build: {
    rollupOptions: {
      output: {
        chunkFileNames: "static/js/[name]-[hash].js",
        entryFileNames: "static/js/[name]-[hash].js",
        assetFileNames: "static/[ext]/[name]-[hash].[ext]"
      }
    }
  },

  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/assets/styles/element/index.scss" as *;`
      }
    },
    postcss: {
      plugins: [
        autoprefixer({
          overrideBrowserslist: ["Android 4.1", "iOS 7.1", "Chrome > 31", "ff > 31", "ie >= 8"]
        }),
        postCsspxToRem({
          rootValue: 16,
          unitPrecision: 4,
          propList: ["*"]
        })
      ]
    }
  },

  plugins: [
    vue(),
    AutoImport({
      imports: ["vue"],
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [
        ElementPlusResolver({
          importStyle: "sass"
        })
      ]
    }),
    eslintPlugin()
  ]
});
